<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/common :: common-header"></head>

<body id="page-top">

<div th:replace="fragments/common :: common-navbar"></div>

<div id="wrapper">

    <!-- Sidebar -->
    <div th:replace="fragments/common :: common-sidebar"></div>

    <div id="content-wrapper">

        <div class="container-fluid">

            <!-- Breadcrumbs-->
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><a href="#">Update User</a></li>
                </ol>
            </nav>

            <!-- Form to add a product -->
            <div class="container">
                <form th:action="@{/user/updateUser}"
                      th:object="${user}"
                      method="post"
                      enctype="multipart/form-data">
                    <fieldset>
                        <legend class="center-block">
                            Update User Information <small class="text-muted">(* is a required field)</small>
                        </legend>
                        <input type="hidden"
                               th:field="*{id}"
                               th:value="${user.id}">

                        <!-- Username -->
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="username">* Username</label>
                            <p th:if="${usernameExists}"
                               class="text-danger">Username already exists. Choose a different one.</p>
                            <p th:if="${#fields.hasErrors('username')}"
                               class="text-danger"
                               th:errors="*{username}"></p>
                            <div class="col-md-8">
                                <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-at fa-fw" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <input type="text"
                                       th:field="*{username}"
                                       class="form-control"
                                       id="username"
                                       th:value="${user.username}"
                                       required="required"
                                       th:classappend="${#fields.hasErrors('username')} ? 'is-invalid'" />
                                </div>
                                <small class="text-muted">Username of the user</small>
                            </div>
                        </div>

                        <!-- First name -->
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="firstName">First name</label>
                            <p th:if="${#fields.hasErrors('firstName')}"
                               class="text-danger"
                               th:errors="*{firstName}"></p>
                            <div class="col-md-8">
                                <input type="text"
                                       th:field="*{firstName}"
                                       class="form-control"
                                       id="firstName"
                                       th:value="${user.firstName}"
                                       th:classappend="${#fields.hasErrors('firstName')} ? 'is-invalid'" />
                                <small class="text-muted">First name of the user</small>
                            </div>
                        </div>

                        <!-- Last name -->
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="lastName">Last name</label>
                            <p th:if="${#fields.hasErrors('lastName')}"
                               class="text-danger"
                               th:errors="*{lastName}"></p>
                            <div class="col-md-8">
                                <input type="text"
                                       th:field="*{lastName}"
                                       class="form-control"
                                       id="lastName"
                                       th:value="${user.lastName}"
                                       th:classappend="${#fields.hasErrors('lastName')} ? 'is-invalid'" />
                                <small class="text-muted">Last name of the user</small>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="email">* Email</label>
                            <p class="text-danger"
                               th:if="${emailExists}">Email already exists. Choose a different one.</p>
                            <p th:if="${#fields.hasErrors('email')}"
                               class="text-danger"
                               th:errors="*{email}"></p>
                            <div class="col-md-8">
                                <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <input type="email"
                                       th:field="*{email}"
                                       class="form-control"
                                       id="email"
                                       required="required"
                                       th:value="${user.email}"
                                       th:classappend="${#fields.hasErrors('email')} ? 'is-invalid'" />
                                </div>
                                <small class="text-muted">Email of the user</small>
                            </div>
                        </div>

                        <!-- Password -->
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="password">* Password</label>
                            <p class="text-danger"
                               th:if="${incorrectPassword}">Password should start with a letter, followed by letters or numbers, 8 through 32 characters long.</p>
                            <p class="text-danger"
                               th:if="${samePassword}">In order to update the password, you should provide a different one, not the same one.</p>
                            <div class="col-md-8">
                                <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-lock fa-fw" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <input type="password"
                                       th:field="*{password}"
                                       class="form-control"
                                       id="password"
                                       placeholder="******"
                                       th:classappend="${incorrectPassword} or ${samePassword} ? 'is-invalid'" />
                                </div>
                                <small class="text-muted">Password of the user. It should start with a letter which can be followed by alphanumeric or alphabet characters, 8 through 32 characters long</small>
                            </div>
                        </div>

                        <!-- Phone number -->
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="phone">Phone</label>
                            <div class="col-md-8">
                                <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-phone fa-fw" aria-hidden="true"></i>
                                    </span>
                                </div>
                                <input type="number"
                                       pattern="/^+\d{1,2}(\d{3})\d{3}-\d{4}$/"
                                       th:field="*{phone}"
                                       class="form-control"
                                       id="phone"
                                       th:value="${user.phone}"
                                       placeholder="Phone"/>
                                </div>
                                <small class="text-muted">Phone number of the user. Pattern: +XX(XXX)XXX-XXXX or +X(XXX)XXX-XXXX</small>
                            </div>
                        </div>

                        <!-- Enabled -->
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="enabled">Enabled</label>
                            <div class="col-md-8">
                                <label><input value="true"
                                              th:field="*{enabled}"
                                              type="radio"
                                              checked="checked" /> Yes </label>
                                <label><input value="false"
                                              th:field="*{enabled}"
                                              type="radio"
                                              name="enabled" /> No </label>
                                <br /><small class="text-muted">Whether the user is enabled or not</small>
                            </div>
                        </div>

                        <!-- Authorities -->
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="authorities">* Authorities</label>
                            <p th:if="${#fields.hasErrors('roles')}"
                               class="text-danger"
                               th:errors="*{roles}"></p>
                            <div class="col-md-8">
                                <input id="authorities"
                                       type="checkbox"
                                       th:field="*{roles}"
                                       value="1"> Admin
                                <input type="checkbox"
                                       th:field="*{roles}"
                                       value="2"> User<br />
                                <small class="text-muted">Authorities of the user</small>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-2"></div>
                            <div class="col-md-8">
                                <button type="submit" class="btn btn-success">Update User</button>
                                <a class="btn btn-danger" th:href="@{/}">Cancel</a>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>

        </div>
        <!-- /.container-fluid -->

        <!-- Sticky Footer -->
        <footer th:replace="fragments/common :: common-footer" class="sticky-footer"></footer>

    </div>
    <!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->

<div th:replace="fragments/common :: common-bottom"></div>

</body>

</html>